import type { TaskProps } from "../../../types";

interface TaskBarProps {
    taskLeft: number;
    taskWidth: number;
    task: TaskProps;
}
function TaskBar({ taskLeft, taskWidth, task }: TaskBarProps) {
    return (
        <div
            className="absolute rounded transition-all duration-200 hover:opacity-80 cursor-pointer shadow-lg"
            style={{
                left: `${taskLeft}px`,
                width: `${taskWidth}px`,
                height: "24px",
                backgroundColor: task.backgroundColor,
                top: "12px",
            }}
        >
            <div className="h-full flex items-center px-2 text-xs text-white font-medium truncate">
                <div
                    className="absolute top-0 left-0 h-full bg-black/20 bg-opacity-20 rounded-l flex items-center px-1"
                    style={{ width: `${task.progress}%` }}
                >
                    {task.name}
                </div>
            </div>
        </div>
    );
}

export default TaskBar;
